<template>
  <div class="detail">
    <el-row :gutter="10">
      <el-col :span="18">
        <el-row>
          <el-card class="box-card">
            <div class="info" :style="{ height: height+30 + 'px' }">
              <el-row class="myRow ">
                <el-col class="title">申请人信息</el-col>
              </el-row>
              <el-row class="myRow">
                <el-col :span="2">姓名：</el-col>
                <el-col :span="6">{{ processInfo.username }}</el-col>
              </el-row>
              <el-row class="myRow footer">
                <el-col :span="2">部门：</el-col>
                <el-col :span="3">{{ processInfo.departmentName }}</el-col>
                <el-col :span="2">入职时间：</el-col>
                <el-col :span="4">{{ processInfo.timeOfEntry }}</el-col>
              </el-row>

              <hr style="color: gray;">
              <process_leave v-if="processInfo.processKey === 'process_leave'" :proc-data="procData" />
              <process_dimission v-if="processInfo.processKey === 'process_dimission'" :proc-data="procData" />
              <process_overtime v-if="processInfo.processKey === 'process_overtime'" :proc-data="procData" />
            </div>
          </el-card>
        </el-row>

      </el-col>
      <el-col :span="6">
        <el-row>
          <el-card>
            <div style="padding: 20px;">
              <div style="margin-bottom: 20px;">
                <span style="font-size: 18px;">审批记录</span>
              </div>
              <div :style="{ height: height-40 + 'px' }">
                <!-- 这里不知道审批逻辑，就用taskList的Length来设置状态了 -->
                <el-steps direction="vertical" :active="taskList.length" finish-status="success">
                  <el-step v-for="(item, index) in taskList" :key="index" :title="item.handleUserName+' '+item.handleOpinion" :description="item.handleTime" />
                </el-steps>
              </div>
            </div>
          </el-card>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import process_leave from './components/process_leave'
import process_dimission from './components/process_dimission'
import process_overtime from './components/process_overtime'
import { getProcessInfo, getTaskList } from '@/api/approval'
export default {
  name: 'ApprovalDetail',
  components: {
    process_leave,
    process_dimission,
    process_overtime
  },
  data() {
    return {
      height: 200,
      processInfo: {},
      statusList: ['已提交', '审批中', '审批通过', '审批不通过', '撤销'],
      procData: {},
      taskList: []
    }
  },
  created() {
    this.loadData()
    this.loadTaskList()
  },
  methods: {
    async loadData() {
    //   console.log('loadData', this.$route.params.id)
      const res = await getProcessInfo(this.$route.params.id)
      //   console.log('loadData', res)
      this.processInfo = res
      this.procData = JSON.parse(this.processInfo.procData)
      this.procData.processStateName = this.statusList[res.processState]
      this.height = res.processKey === 'process_leave' ? 300 : 200
    },
    async loadTaskList() {
      const res = await getTaskList(this.$route.params.id)
      //   console.log('loadTaskList', res)
      this.taskList = res
    }
  }

}
</script>

<style scoped>
    .detail {

        margin: 20px;
    }
    .myRow{
        margin-top: 10px;
        font-size: 14px;
    }
    .myRow .title{
        font-size: 18px;
    }
    .footer{
        margin-bottom: 20px;
    }
</style>
